import React, { PureComponent } from 'react';
import { get } from 'lodash';
import PropTypes from 'prop-types';
import { Form, Row, Col } from 'antd';
import { ComboList, MoneyInput } from 'suid';
import { constants } from '@/utils';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

const { PRICE_MANGER_ACTION, SERVER_PATH } = constants;
const ACTIONS = Object.keys(PRICE_MANGER_ACTION).map(key => PRICE_MANGER_ACTION[key]);

@Form.create()
class FormModal extends PureComponent {
  static propTypes = {
    action: PropTypes.oneOf(ACTIONS).isRequired,
    currentData: PropTypes.object,
    onFormModalRef: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      globalDisabled: false,
    };
  }

  componentDidMount() {
    const { onFormModalRef } = this.props;
    if (onFormModalRef) {
      onFormModalRef(this);
    }
    this.initGlobalAction();
  }

  initGlobalAction = () => {
    const { action } = this.props;
    let globalDisabled = false;
    switch (action) {
      case PRICE_MANGER_ACTION.VIEW:
        globalDisabled = true;
        break;
      case PRICE_MANGER_ACTION.ADD:
        break;
      default:
    }
    this.setState({ globalDisabled });
  };

  getFormData = () => {
    const { form, currentData } = this.props;
    let data = null;
    form.validateFields((err, formData) => {
      if (err) {
        return;
      }
      data = {};
      Object.assign(data, currentData || {});
      Object.assign(data, formData);
    });
    return data;
  };

  initFieldDecorator = () => {
    const { form, currentData } = this.props;
    const { getFieldDecorator } = form;
    getFieldDecorator('code0', {
      initialValue: get(currentData, 'code0', null),
    });
    getFieldDecorator('code1', {
      initialValue: get(currentData, 'code1', null),
    });
    getFieldDecorator('code2', {
      initialValue: get(currentData, 'code2', null),
    });
    getFieldDecorator('code3', {
      initialValue: get(currentData, 'code3', null),
    });
    getFieldDecorator('code4', {
      initialValue: get(currentData, 'code4', null),
    });
    getFieldDecorator('code5', {
      initialValue: get(currentData, 'code5', null),
    });
  };

  clearCurrentCode0 = item => {
    const { form, currentData } = this.props;
    const code0 = get(currentData, 'code0', null);
    if (code0 !== item.code) {
      form.setFieldsValue({
        code1: null,
        code2: null,
        code3: null,
        code4: null,
        code5: null,
        name1: null,
        name2: null,
        name3: null,
        name4: null,
        name5: null,
      });
      const data = {};
      Object.assign(data, currentData, {
        code1: null,
        code2: null,
        code3: null,
        code4: null,
        code5: null,
        name1: null,
        name2: null,
        name3: null,
        name4: null,
        name5: null,
      });
    }
  };

  clearCurrentCode1 = item => {
    const { form, currentData } = this.props;
    const code1 = get(currentData, 'code1', null);
    if (code1 !== item.code) {
      form.setFieldsValue({
        code2: null,
        code3: null,
        code4: null,
        code5: null,
        name2: null,
        name3: null,
        name4: null,
        name5: null,
      });
      const data = {};
      Object.assign(data, currentData, {
        code2: null,
        code3: null,
        code4: null,
        code5: null,
        name2: null,
        name3: null,
        name4: null,
        name5: null,
      });
    }
  };

  clearCurrentCode2 = item => {
    const { form, currentData } = this.props;
    const code2 = get(currentData, 'code2', null);
    if (code2 !== item.code) {
      form.setFieldsValue({
        code3: null,
        code4: null,
        code5: null,
        name3: null,
        name4: null,
        name5: null,
      });
      const data = {};
      Object.assign(data, currentData, {
        code3: null,
        code4: null,
        code5: null,
        name3: null,
        name4: null,
        name5: null,
      });
    }
  };

  clearCurrentCode3 = item => {
    const { form, currentData } = this.props;
    const code3 = get(currentData, 'code3', null);
    if (code3 !== item.code) {
      form.setFieldsValue({
        code4: null,
        code5: null,
        name4: null,
        name5: null,
      });
      const data = {};
      Object.assign(data, currentData, {
        code4: null,
        code5: null,
        name4: null,
        name5: null,
      });
    }
  };

  clearCurrentCode4 = item => {
    const { form, currentData } = this.props;
    const code4 = get(currentData, 'code4', null);
    if (code4 !== item.code) {
      form.setFieldsValue({
        code5: null,
        name5: null,
      });
      const data = {};
      Object.assign(data, currentData, {
        code5: null,
        name5: null,
      });
    }
  };

  render() {
    const { form, currentData } = this.props;
    const { globalDisabled } = this.state;
    const { getFieldDecorator } = form;
    this.initFieldDecorator();

    const code0Props = {
      autoLoad: true,
      disabled: globalDisabled,
      placeholder: '请选择类型',
      remotePaging: false,
      pagination: false,
      allowClear: false,
      form,
      name: 'name0',
      field: ['name0', 'code0'],
      store: {
        url: `${SERVER_PATH}/jiyu/jyPriceUpdate/getPullDownInfo`,
      },
      cascadeParams: {
        nodeLevel: '0',
        preCode: '',
      },
      afterSelect: item => {
        this.clearCurrentCode0(item);
      },
      reader: {
        name: 'name',
        field: ['name', 'code'],
      },
      searchProperties: ['name', 'code'],
    };

    const code1Props = {
      disabled: globalDisabled,
      placeholder: '请选择品牌',
      remotePaging: false,
      pagination: false,
      allowClear: false,
      form,
      name: 'name1',
      field: ['name1', 'code1'],
      emptyText: form.getFieldValue('code0') ? '暂无数据' : '请选择类型',
      store: {
        url: `${SERVER_PATH}/jiyu/jyPriceUpdate/getPullDownInfo`,
      },
      cascadeParams: {
        nodeLevel: '1',
        preCode: form.getFieldValue('code0'),
      },
      afterSelect: item => {
        this.clearCurrentCode1(item);
      },
      reader: {
        name: 'name',
        field: ['name', 'code'],
      },
      searchProperties: ['name', 'code'],
    };

    const code2Props = {
      disabled: globalDisabled,
      placeholder: '请选择系列',
      remotePaging: false,
      pagination: false,
      allowClear: false,
      form,
      name: 'name2',
      field: ['name2', 'code2'],
      emptyText: form.getFieldValue('code1') ? '暂无数据' : '请选择品牌',
      store: {
        url: `${SERVER_PATH}/jiyu/jyPriceUpdate/getPullDownInfo`,
      },
      cascadeParams: {
        nodeLevel: '2',
        preCode: form.getFieldValue('code1'),
      },
      afterSelect: item => {
        this.clearCurrentCode2(item);
      },
      reader: {
        name: 'name',
        field: ['name', 'code'],
      },
      searchProperties: ['name', 'code'],
    };

    const code3Props = {
      disabled: globalDisabled,
      placeholder: '请选择型号',
      remotePaging: false,
      pagination: false,
      allowClear: false,
      form,
      name: 'name3',
      field: ['name3', 'code3'],
      emptyText: form.getFieldValue('code2') ? '暂无数据' : '请选择系列',
      store: {
        url: `${SERVER_PATH}/jiyu/jyPriceUpdate/getPullDownInfo`,
      },
      cascadeParams: {
        nodeLevel: '3',
        preCode: form.getFieldValue('code2'),
      },
      afterSelect: item => {
        this.clearCurrentCode3(item);
      },
      reader: {
        name: 'name',
        field: ['name', 'code'],
      },
      searchProperties: ['name', 'code'],
    };

    const code4Props = {
      disabled: globalDisabled,
      placeholder: '请选择规格',
      remotePaging: false,
      pagination: false,
      allowClear: false,
      form,
      name: 'name4',
      field: ['name4', 'code4'],
      emptyText: form.getFieldValue('code3') ? '暂无数据' : '请选择型号',
      store: {
        url: `${SERVER_PATH}/jiyu/jyPriceUpdate/getPullDownInfo`,
      },
      cascadeParams: {
        nodeLevel: '4',
        preCode: form.getFieldValue('code3'),
      },
      afterSelect: item => {
        this.clearCurrentCode4(item);
      },
      reader: {
        name: 'name',
        field: ['name', 'code'],
      },
      searchProperties: ['name', 'code'],
    };

    const code5Props = {
      disabled: globalDisabled,
      placeholder: '请选择成色',
      remotePaging: false,
      pagination: false,
      allowClear: false,
      form,
      name: 'name5',
      field: ['name5', 'code5'],
      emptyText: form.getFieldValue('code4') ? '暂无数据' : '请选择规格',
      store: {
        url: `${SERVER_PATH}/jiyu/jyPriceUpdate/getPullDownInfo`,
      },
      cascadeParams: {
        nodeLevel: '5',
        preCode: form.getFieldValue('code4'),
      },
      reader: {
        name: 'name',
        field: ['name', 'code'],
      },
      searchProperties: ['name', 'code'],
    };

    return (
      <Form {...formItemLayout} layout="horizontal">
        <Row gutter={24}>
          <Col span={12}>
            <FormItem label="类型">
              {getFieldDecorator('name0', {
                initialValue: get(currentData, 'name0', ''),
                rules: [
                  {
                    required: true,
                    message: '类型',
                  },
                ],
              })(<ComboList {...code0Props} />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="品牌">
              {getFieldDecorator('name1', {
                initialValue: get(currentData, 'name1', ''),
              })(<ComboList {...code1Props} />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="系列">
              {getFieldDecorator('name2', {
                initialValue: get(currentData, 'name2', ''),
              })(<ComboList {...code2Props} />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="型号">
              {getFieldDecorator('name3', {
                initialValue: get(currentData, 'name3', ''),
              })(<ComboList {...code3Props} />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="规格">
              {getFieldDecorator('name4', {
                initialValue: get(currentData, 'name4', ''),
              })(<ComboList {...code4Props} />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="成色">
              {getFieldDecorator('name5', {
                initialValue: get(currentData, 'name5', ''),
              })(<ComboList {...code5Props} />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="调价幅度">
              {getFieldDecorator('priceUpdate', {
                initialValue: get(currentData, 'priceUpdate', ''),
                rules: [
                  {
                    required: true,
                    message: '调价幅度',
                  },
                ],
              })(<MoneyInput disabled={globalDisabled} />)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}

export default FormModal;
